<template>
    <div id="total">
        <div class="search-content select-search">
            <el-select v-model="agent" clearable placeholder="请选择代理名称" @change="queryTotal">
                <el-option
                        v-for="item in agentList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-date-picker
                    v-model="dateTimeRange"
                    type="datetimerange"
                    range-separator="至"
                    clearable
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="queryTotal"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="queryTotal">查询</el-button>
        </div>
        <div class="search-content">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom:10px;">
                    <el-card shadow="hover">
                        <div class="title">消费提成</div>
                        <hr/>
                        <p>充值金币提成:{{total.rechargeCoins}}</p>
                        <p>升级会员提成:{{total.upgradeMember}}</p>
                        <p>礼物提成:{{total.receivingGifts}}</p>
                        <p>上墙分润:{{total.goldUpperWall}}</p>
                        <p>金币升级会员提成:{{total.goldUpgradeMember}}</p>
                        <p>购买表情提成:{{total.buyingExpression}}</p>
                        <p>总提成:{{total.total}}</p>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-card shadow="hover">
                        <div class="title">代理信息</div>
                        <hr/>
                        <p>代理名称:{{agentData.userName}}</p>
                        <p>代理昵称:{{agentData.name}}</p>
                        <p>电话号码:{{agentData.phone}}</p>
                        <p>邮箱:{{agentData.mail}}</p>
                        <p>推广地址:{{agentData.recommendUrl}}</p>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {Message} from 'element-ui';
    import request from "../../utils/request";
    import {parseTime} from "../../utils/index"


    export default {
        name: "Total",
        data() {
            return {
                // 查询
                agent: '',
                agentList: [],
                dateTimeRange: [],
                total: {
                    rechargeCoins: 0,
                    upgradeMember: 0,
                    receivingGifts: 0,
                    goldUpperWall:0,
                    goldUpgradeMember: 0,
                    buyingExpression: 0,
                    total: 0
                },
                agentData: {},
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '前天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                                let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '本月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '上月',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                                let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                                end.setTime(end.getTime() - 3600 * 24 * 1000);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },

            }
        },
        mounted() {
            this.inquiryAgentList();
        },
        methods: {

            //查询代理下拉列表
            inquiryAgentList() {
                const end = new Date();
                const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                this.dateTimeRange = [parseTime(start),parseTime(end)];
                let that = this;
                request({
                    method: 'get',
                    url: 'admin/agent/all/select',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                }).then(function (res) {
                    if (res.code === 200) {
                        let arr = res.data;
                        if (arr.length > 0) {
                            for (let i = 0; i < arr.length; i++) {
                                that.agentList.push({
                                    label: arr[i].name,
                                    value: arr[i].id
                                })
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //查询列表
            queryTotal() {
                let that = this;
                if (!that.agent) {
                    Message.warning("请先选择一个代理名称");
                    return false;
                }
                let data = {};
                if (that.dateTimeRange.length > 0) { //赠送时间范围
                    data = {
                        start: that.dateTimeRange[0],
                        end: that.dateTimeRange[1]
                    };
                    request({
                        method: 'post',
                        url: "admin/profit/total/" + that.agent,
                        params: data
                    }).then(function (res) {
                        if (res.code === 200) {
                            that.total = res.data.total;
                            that.agentData = res.data.agent;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        }
    }
</script>

<style src="../../assets/css/agentProfitManagement/totalStyle.css">

</style>
